import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Link } from 'react-router-dom';
import { getCurrentProfile, deleteAccout } from './../../actions/profileActions'
// 加载动画
import Spinner from '../../common/Spinner'
import ProfileActives from './ProfileActives'
import Experience from './Experience'
import Education from './Education'
// 登录后显示用户信息
export class Dashboard extends Component {
  componentDidMount () {
    // 调用dispatch请求数据
    this.props.GetCurrentProfile()
  }
  // 删除
  onDeleteClick = () => {
    this.props.deleteAccout()
  }
  render () {
    const { user } = this.props.auth;
    const { profile, loading } = this.props.profile
    let dashboardContent;
    // 判断profile或loading是否为空
    if (profile == null || loading) {
      dashboardContent = <Spinner />
    } else {
      // 用户登入成功,并有数据
      if (Object.keys(profile).length > 0) {
        dashboardContent = <div>
          <p className="lead text-muted">
            Welcome <Link to={`/profile/${profile.handle}`}>{user.name}</Link>

          </p>
          <ProfileActives />

          {/* 教育经历 个人履历 */}
          <Experience experience={profile.experience} />
          {/* 教育经历 */}
          <Education education={profile.education} />
          {/* 删除账户按钮 */}
          <div style={{ marginBottom: '60px' }} />
          <button
            onClick={this.onDeleteClick}
            className="btn btn-danger"
          >
            删除当前账户
            </button>
        </div>
      } else {
        // 登入没有数据
        dashboardContent = (
          < div >
            <p className="lead text-muted">欢迎 {user.name}</p>
            <p>没有任何相当个人信息,请添加个人信息</p>
            <Link className="btn btn-lg btn-info" to="/create-profile">创建个人信息</Link>
          </div >
        )
      }
    }
    return (
      <div className="dashboard">
        <div className="container">
          <div className="row">
            <div className="col-md-12">
              <h1 className="dispaly-4">主页面</h1>
              {dashboardContent}
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  auth: state.auth,
  profile: state.profile
})

const mapDispatchToProps = (dispatch) => {
  return {
    GetCurrentProfile: () => {
      dispatch(getCurrentProfile())
    },
    // 删除帐号
    deleteAccout: () => {
      dispatch(deleteAccout())
    }
  }

}

export default connect(mapStateToProps, mapDispatchToProps)(Dashboard)
